<script>
  import { count, time, elapsed, doubled, summed, countnum } from "./store"
  function decrement() {
    count.update((n) => n - 1)
  }
  function increment() {
    count.update((n) => n + 1)
  }
  function reset() {
    count.set(0)
  }
  const time_options = {
    hour12: false,
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "numeric",
    minute: "2-digit",
    second: "2-digit",
    // calendar: 'chinese',
  }
  const formatter = new Intl.DateTimeFormat("zh", time_options)
</script>

<div class="w-full p-20 rounded-lg">
  <p class="text-center text-yellow-700 ">store例子 只读、可写、派生</p>
  <div class="text-center text-green-800 ">{$count} {$doubled} {$summed}</div>
  <div class="text-center text-red-600">
    <button on:click={decrement}>-</button>
    <button on:click={increment}>+</button>
    <button on:click={reset}>reset</button>
  </div>
  <div class="text-center text-green-400 ">
    <h1>现在时间是{formatter.format($time)}</h1>
    <p>页面运行 {$elapsed} {$elapsed === 1 ? "秒钟" : "秒"}</p>
  </div>
  <div class="p-10 mt-5 text-center bg-gray-400 rounded-lg">
    <h1>The count is {$countnum}</h1>

    <button on:click={countnum.increment}>+</button>
    <button on:click={countnum.decrement}>-</button>
    <button on:click={countnum.reset}>reset</button>
  </div>
</div>

<style>
  button {
    padding: 5px;
    width: 50px;
    background-color: #fff000;
  }
</style>
